<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>



<title>gravitas3.0</title>
<!--gravity experiment program-->
<!--
This is a gravity dropping box program
Allowing you to manipulate gravity of a falling object
-->

</head>
<body style="font-family:Arial;background-color:#fff;">


<div id="wrap" style="width:800px;height:600px;background-color:#888;padding:0px;margin:auto;border:1px solid #333;overflow:hidden;">

<div id="menu" style="float:right;height:800px;width:200px;background-color:#553;color:#ff9;padding:10px;display:block">
<input type="button" value="DROP" onclick="handleDropButton();"/>
<input type="button" value="LIFT" onclick="handleLiftButton();"/>
</div>

<img id="box" style="position:relative;top:50px;left:50px;height:72px" src="box0.png"/>

</div>

<div id="notes" style=" width:780px;height:30px;background-color:#c64;margin:auto;padding:10px;border:1px solid #333;color:#fdb;">
greetings earthling
</div>

<script type="text/javascript">

//suenolines@gmail.com

var notes = document.getElementById('notes');
var box = document.getElementById('box');
var wrap = document.getElementById('wrap');

var pixToMove = 10;

function dropBox(){
 	
	if(parseInt(box.style.top) < parseInt(wrap.style.height) - parseInt(box.style.height)){
	
		box.style.top = (parseInt(box.style.top) + pixToMove) + 'px';
		setTimeout(function(){dropBox()}, 0);
	}

}

function liftBox(){

	if(parseInt(box.style.top) > 0 ){
	
	 	box.style.top = (parseInt(box.style.top) - pixToMove) + 'px';
		setTimeout(function(){liftBox()}, 0);
	}

}

function handleDropButton(){
	box.src = 'box1.png';
	pixToMove = 10;
	dropBox();
}

function handleLiftButton(){
	box.src = 'box0.png';
	pixToMove = 50;
	liftBox();
}

</script>


</body>
</html>
